<template>
    <div class="FromGood">
        <el-form :model="goodFrom" :rules="ruleGood" ref="goodFrom" label-width="120px" class="demo-ruleForm">
            <el-form-item label="产品名称" prop="name">
                <el-input v-model="goodFrom.name" placeholder="请输入产品名称"></el-input>
            </el-form-item>
            <el-form-item label="产品描述" prop="content">
                <el-input v-model="goodFrom.content" placeholder="请输入产品描述"></el-input>
            </el-form-item>
            <el-form-item label="产品价格(元)" prop="money">
                <el-input-number v-model="goodFrom.money" :precision="2" :step="1" :max="10000" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="产品总量(件)" prop="totel">
                <el-input-number v-model="goodFrom.totel" :step="1" :precision='0' :max="10000" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="图片地址" prop="img">
                <el-input v-model="goodFrom.img" placeholder="请输入产品产地"></el-input>
            </el-form-item>
            <el-form-item label="产品分类" prop="classify_name">
                <el-select v-model="goodFrom.classify_name" placeholder="请选择产品分类">
                  <el-option
                      v-for="items in classify"
                      :key="items.id"
                      :label="items.name"
                      :value="items.name">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">立即添加</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {oneGoods,getClassify,updateGoods} from "@/http/api";
import {Message} from "element-ui";

export default {
    created() {
      this.getClassify();
    },
    data(){
        return {
            //接受参数
            id: 0,
            //分类
            classify: [],
            oneGoods: [],
            //内容
            goodFrom:{
                id: 0,
                name: "",
                content: "",
                money: 0,
                totel: 0,
                classify_name: "",
                img: "",
                create_time_temp: "",
                update_time_temp: ""
            },
            //验证规则
            ruleGood:{

            },
        }
    },
    methods: {
        getClassify(){
          getClassify().then(res => {
            console.log(res);
            this.classify = res.classify;
            this.goodFrom.classify_name = this.classify[0].name;
          });
        },
        submitForm(){
          if (this.goodFrom.name===""||this.goodFrom.content===""||this.goodFrom.img===""){
            Message({
              message: '请将信息完整输入！',
              type: 'error',
              duration: 5*1000
            })
            return false;
          }
          let date = {
            year: new Date().getFullYear(),
            month: new Date().getMonth() < 9 ? "0" + (new Date().getMonth() + 1) : new Date().getMonth() + 1,
            date: new Date().getDate() <= 9 ? "0" + new Date().getDate() : new Date().getDate(),
          }
          this.goodFrom.update_time_temp = date.year + '-' + date.month + '-' + date.date;
          updateGoods(this.goodFrom).then(res => {
            Message({
              message: '操作成功！',
              type: 'success',
              duration: 5*1000
            })
          });
          this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
          this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length-1].path)
        },
        getoneGoods(){
          const params = {
            id: this.id,
          };
          oneGoods(params).then(res => {
            console.log(res);
            this.oneGoods = res.oneGoods;
            this.goodFrom.name = this.oneGoods[0].name;
            this.goodFrom.content = this.oneGoods[0].content;
            this.goodFrom.money = this.oneGoods[0].money;
            this.goodFrom.totel = this.oneGoods[0].totel;
            this.goodFrom.img = this.oneGoods[0].img;
            this.goodFrom.classify_name = this.oneGoods[0].classify_name;
            this.goodFrom.create_time_temp = this.oneGoods[0].create_time_temp;
          });
        }
    },
    mounted() {
      this.id=this.$route.params.id;
      this.goodFrom.id=this.id;
      console.log(this.id)
      if (this.id !== 0){
        this.getoneGoods();
      }
    }
}
</script>

<style scoped>
.FromGood{
    width: 100%;
    min-height: 100%;
    padding: 15px;
    box-sizing: border-box;
}
</style>